<template>
	<view class="content">
		<u-no-network></u-no-network>

		<view class="info">
			<view class="info1 ">
				<text>姓名</text>
				<input type="text" v-model="name" value="" placeholder="请输入姓名" />
			</view>
			<view class="info2">
				<text>手机号</text>
				<input type="number" v-model="mobile" value="" placeholder="请输入手机号" />
			</view>
			<view class="info2" @click="opnMap">
				<text>收货地址</text>
				<input type="text" v-model="shipAddr" value="" disabled placeholder="请输入请输入收货地址" />
			</view>
		
		</view>
	

		<view class="applyToSettleIn shadow " >
			<button type="cu-btn bg-green round shadow text-shadow lg" @click="newRcpt " >立即上传</button>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name:'',
			mobile:'',
			shipAddr:'',
			did:''
			
		};
	},
	methods: {
		// 用户新增收货地址 更新
		async newRcpt(){
			if (!this.name) return uni.$showMsg('请输入姓名');
			if (!this.mobile) return uni.$showMsg('请输入手机号');
			if (!this.shipAddr) return uni.$showMsg('请输入请输入收货地址');
			uni.$showLoading() 
			 let obj = {
			     uid: uni.getStorageSync("uid"),
				 name:this.name,
				 phone:this.mobile,
				 site:this.shipAddr,
				 did:this.did,
			 };
			 const res = await this.$u.post("api/shop/address_add",obj,{});
			 if (!res.code) return uni.$showMsg();
			 this.data = res.data;
			 uni.$showMsg(res.msg) 
			 console.log("用户新增收货地址 >>  ", res);
			 setTimeout(() => {
			 	uni.navigateBack({
			 		delta: 1
			 	});
			 }, 1000);
			 
		},
		
		async opnMap(){
			const [,{ name, address, longitude, latitude }] = await uni.chooseLocation();
			this.shipAddr = address
			console.log('位置名称：' + name);
			console.log('详细地址：' + address);
			console.log('经度：' + longitude);
			console.log('纬度：' + latitude);
		}
	},
	onLoad(e) {
		
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
		});
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	input {
		padding-left: 10rpx;
	}
	.shop {
		//width: 690rpx;
		// height: 282rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 31rpx;
		margin-top: 20rpx;
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.info {
		//width: 690rpx;
		// height: 450rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 0 31rpx;
		.verificationCd {
			position: relative;
			.countdown {
				position: absolute;

				right: 50rpx;

				width: 110rpx;
				height: 60rpx;
				border-radius: 35rpx;
				//background-color: #007aff;
			}
		}

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 131rpx;
			margin-left: 29rpx;
			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.applyToSettleIn {
		button {
			position: fixed;
			bottom: 30rpx;
			
			width: 690rpx;
			height: 100rpx;
			background: #FF1A14;
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
